<template>
  <div>
    <div class="functional-module">
      <!-- <img @click="showModal" src="~@/assets/reception/home/advice.png" alt=""> -->
      <!-- <img @click="routerpush()" src="~@/assets/reception/home/joinMember.png" alt=""> -->
      <!-- <img @click="showModal" src="~@/assets/reception/home/inquiry.png" alt=""> -->
      <!-- <img @click="routerpush('/reslogin')" src="~@/assets/reception/home/Login&Reg.png" alt=""> -->
      <img @click="showModal" src="~@/assets/reception/home/customerSer.png" alt="" />
      <div>客服咨询</div>
    </div>
    <a-modal title="联安共享服务平台" :visible="visible" @cancel="handleCancel" :width="1000" footer="">
      <div class="consulting">
        <div class="problem-consultation">
          <span class="consultation-title">常见咨询问题</span>
          <div class="consultation-items">
            <span
              class="consultation-item"
              :class="item.isshow ? 'consultation-item-show' : ''"
              v-for="(item, index) in consultationItem"
              :key="index"
              @click="consultationisshow(index)"
            >
              {{ item.name }}
            </span>
          </div>
        </div>
        <div class="consulting-reply">
          <div class="customer-service" ref="scrollWrap">
            <div class="customer-service-item">
              <img src="~@/assets/reception/reply.png" alt="" />
              <span class="customer-service-reply">已为你接通在线客服...请讲</span>
            </div>
            <div
              class="customer-service-item"
              :class="item.class"
              v-for="(item, index) in customerServiceItem"
              :key="index"
            >
              <div v-if="item.class">
                <span class="customer-service-reply">{{ item.name }}</span>
                <img src="~@/assets/reception/reply.png" alt="" />
              </div>
              <div v-else>
                <img src="~@/assets/reception/reply.png" alt="" />
                <span class="customer-service-reply">{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div class="consulting-message">
            <a-textarea style="width: 100%" v-model="textmessage" placeholder="请输入..." :rows="4" />
            <a-button class="send-btn" type="primary" @click="sendMsg" :disabled="isinput">发送</a-button>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {
  getAppGetNewsListApi,
  getAppGetUserByIDApi,
  GenerateNewUserIDApi,
  dataAddApi,
  ChatIndataAddApi,
  Server_ListNumberApi,
  Get_PCCharIn_ListApi,
  Set_ChatInYDApi,
} from '@/api/resService'
import store from '@/store/index'

export default {
  name: 'functional',
  data() {
    return {
      ModalText: 'Content of the modal',
      visible: false,
      confirmLoading: false,
      timer: null,
      textmessage: '',
      isinput: true,
      ChatWindowID: '',
      reviewStatus: false,
      customerServiceItem: [],
      consultationItem: [
        {
          name: '入会问题',
          isshow: true,
        },
        {
          name: '注册问题',
          isshow: false,
        },
        {
          name: '收费问题',
          isshow: false,
        },
      ],
    }
  },
  methods: {
    routerpush(path) {
      this.$router.push({ path: '/reception/membership/Submitted' })
    },
    showModal() {
      this.visible = true
    },
    handleCancel(e) {
      this.visible = false
    },
    consultationisshow(index) {
      for (const item of this.consultationItem) {
        item.isshow = false
      }
      this.customerServiceItem = []
      this.consultationItem[index].isshow = true
    },
    // getAppGetUserByID(){
    //   getAppGetUserByIDApi({
    //     ID: this.$store.getters.userid,
    //   }).then((res) => {
    //     if (res.data.length > 0) {
    //       this.reviewStatus = true
    //     }else{
    //       this.reviewStatus = false
    //     }
    //   }).catch((err) => {
    //     console.log('err',err);
    //   })
    // },
    sendMsg() {
      this.customerServiceItem.push({
        name: this.textmessage,
        class: 'service-reply-me',
      })
      ChatIndataAddApi({
        ID: this.ChatWindowID,
        spare1: 1,
        ContentMS: this.textmessage,
        type: 0,
      })
        .then((res) => {
          console.log('this.customerServiceItem', res, this.customerServiceItem)
          this.textmessage = ''
          setTimeout(() => {
            this.scrollBottom()
          })
        })
        .catch((err) => {
          console.log('err', err)
        })
    },
    Server_ListNumber() {
      if (this.$store.getters.userid) {
        Server_ListNumberApi({
          UserID: this.$store.getters.userid,
          spare1: 1,
        }).then((res) => {
          console.log('res', res)
          if (res.data) {
            // Get_PCCharIn_ListApi({
            //   pageIndex:1,
            //   pageSize:10,
            //   ID:[id],
            //   spare1:2
            // }).then((res) => {
            // })
          }
        })
      } else {
        Server_ListNumberApi({
          UserID: localStorage.getItem('ChatWindowID'),
          spare1: 1,
        }).then((res) => {
          console.log('res', res, res.length, typeof res)
          if (res.length >= 6) {
            console.log('111111111111111', JSON.parse(res.substring(5))[0])
            if (JSON.parse(res.substring(5))[0].ContentMS == '') {
              this.ChatWindowID = JSON.parse(res.substring(5))[0].ID
            } else {
              this.customerServiceItem.push({
                name: JSON.parse(res.substring(5))[0].ContentMS,
                class: '',
              })
              Set_ChatInYDApi({
                ID: this.ChatWindowID,
                spare1: 1,
              }).then((res) => {
                console.log('res', res)
              })
              setTimeout(() => {
                this.scrollBottom()
              })
            }
          }
        })
      }
    },
    onScrollListener() {
      if (this.$refs.scrollWrap.scrollTop == 0) {
        if (this.Get_PCCpageSize >= 35) {
          // this.$baseUI.showToast('暂无更多数据')
          return
        }

        this.Get_PCCpageSize = this.Get_PCCpageSize + 5
        this.Get_PCCharIn_List()
        const scrollWrap = this.$refs.scrollWrap
        let h1 = scrollWrap.scrollHeight
        //模拟耗时任务从接口获取数据
        setTimeout(() => {
          // this.$baseUI.hideLoading();
          //list更新后，等待页面渲染完毕再去拿scrollHeight,否则拿到的是之前的
          this.$nextTick(() => {
            let h2 = scrollWrap.scrollHeight
            //顶部在原先基础上往下滚动50px，露出新加载数据的一点
            scrollWrap.scrollTo({
              top: h2 - h1 - 300,
              behavior: 'smooth', //auto-自动滚动 instant-瞬间滚动 smooth-平滑滚动
            })
          })
        }, 100)
      }
    },
    //滚动到顶部
    scrollTop() {
      this.$nextTick(() => {
        const scrollWrap = this.$refs.scrollWrap
        scrollWrap.scrollTo({
          top: 0,
          behavior: 'smooth', //auto-自动滚动 instant-瞬间滚动 smooth-平滑滚动
        })
      })
    },
    //滚动到底部
    scrollBottom() {
      this.$nextTick(() => {
        let scrollWrap = this.$refs.scrollWrap
        scrollWrap.scrollTo({
          top: scrollWrap.scrollHeight,
          behavior: 'smooth', //auto-自动滚动 instant-瞬间滚动 smooth-平滑滚动
        })
      })
    },
  },
  mounted() {
    this.timer = setInterval(() => {
      this.Server_ListNumber()
    }, 10000)
    // this.$nextTick(() => {
    //   this.$refs.scrollWrap.addEventListener('scroll', this.onScrollListener)
    // })
    if (localStorage.getItem('ChatWindowID')) {
      console.log('localStorage.getItem', localStorage.getItem('ChatWindowID'))
      dataAddApi({
        buyID: localStorage.getItem('ChatWindowID'),
        sellID: 1,
        type: 1,
        commodityID: '',
      }).then((res) => {
        this.ChatWindowID = res.ID
      })
    } else if (this.$store.getters.userid) {
      dataAddApi({
        buyID: this.$store.getters.userid,
        sellID: 1,
        type: 1,
        commodityID: '',
      }).then((res) => {
        this.ChatWindowID = res.ID
      })
    } else {
      GenerateNewUserIDApi().then((res) => {
        // store.state.user.userid = res.data
        localStorage.setItem('ChatWindowID', res.data)
        dataAddApi({
          buyID: res.data,
          sellID: 1,
          type: 1,
          commodityID: '',
        }).then((res) => {
          this.ChatWindowID = res.ID
        })
      })
    }
  },
  watch: {
    textmessage(newVal, oldVal) {
      if (newVal != '') {
        this.isinput = false
      } else {
        this.isinput = true
      }
    },
  },
  beforeDestroy() {
    // this.$refs.scrollWrap.removeEventListener('scroll', this.onScrollListener)
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
}
</script>

<style lang="less" scoped>
.functional-module {
  width: 130px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 410px;
  left: 30px;
  text-align: center;
  font-size: 14px;
  img {
    margin: 5px 0;
    height: 95px;
    cursor: pointer;
  }
  div{
    margin-right:10px;
  }
}
.consulting {
  display: flex;
  .problem-consultation {
    background: #f2f6f7;
    padding: 10px 20px;
    width: 200px;
    .consultation-title {
      // line-height: 40px;
      padding: 10px 20px;
      border-bottom: #aeb1b2 solid 3px;
    }
    .consultation-items {
      margin-top: 20px;
      text-align: center;
      display: flex;
      flex-direction: column;
      .consultation-item {
        margin: 20px;
        cursor: pointer;
      }
      .consultation-item-show {
        color: #267a96;
      }
    }
  }
  .consulting-reply {
    padding: 20px;
    width: 100%;
    .customer-service {
      height: 400px;
      display: flex;
      flex-direction: column;
      overflow: auto;
      .customer-service-reply {
        margin-left: 20px;
        background: #f3f4f7;
        padding: 5px 20px;
      }
      .customer-service-item {
        margin: 5px 0;
      }
      .service-reply-me {
        // float: right;
        text-align: end;
        justify-content: flex-end;
      }
    }
    .consulting-message {
      .send-btn {
        margin-top: 20px;
        float: right;
      }
    }
  }
}
</style>
